<template>
  <div class="app-main">
    <div class="main">
      <div class="title">{{DetailData.Name}}</div>
      <div class="videoContent">
        <video
          controls
          width="1000"
          height="600"
          :src="proxy.$addFileHead(DetailData.VideoPath)"
          :poster="proxy.$addFileHead(DetailData.VideoCover)"
        ></video>
      </div>
      <div class="videoInfo box-shadow">
        <div>
          <span class="label">播放量：</span>
          <span class="value">{{ DetailData.ViewCounts }}</span>
        </div>
        <div>
          <span class="label">课程类型：</span>
          <span class="value">{{ DetailData.Name_Type }}</span>
        </div>
        <div>
          <span class="label">视频简介：</span>
          <span class="value">{{ DetailData.Introduce }}</span>
        </div>
        <div>
          <span class="label">上传者：</span>
          <span class="value">{{
            proxy.$filterUserName(DetailData.CreateUser)
          }}</span>
        </div>
        <div>
          <span class="label">上传时间：</span>
          <span class="value">{{ DetailData.CreateTime }}</span>
        </div>
        <div>
          <span class="label">最近更新时间：</span>
          <span class="value">{{ DetailData.UpdateTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="VideoDetail">
import { GetCourseDetail } from '@/api/online/platform.js';
const { proxy } = getCurrentInstance();
const route = useRoute();
const DetailData = ref({});
async function getDetail() {
  try {
    let res = await GetCourseDetail({ ID: route.query.id });
    DetailData.value = res.data;
  } catch (error) {
    console.log(error);
  }
}
onMounted(() => {
  getDetail();
});
</script>

<style lang="scss" scoped>
.app-main {
  padding: 10px;
  height: 100vh;
  .main {
    width: 1000px;
    margin: auto;
    .title {
      font-size: 20px;
      margin-bottom: 10px;
    }
    .videoContent {
      background-color: black;
      overflow: hidden;
      border-radius: 10px;
    }
    .videoInfo {
      border-radius: 10px;
      background-color: white;
      margin-top: 20px;
      padding: 20px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      .label {
        font-weight: bold;
      }
    }
  }
}
</style>
